<template>
  <div class="container">
    <div class="process-box">
      <div class="box-name">审批</div>
      <div class="box-content">
        <div class="process-name">审批流程</div>
        <div class="process-content">
          <div class="step">
            <el-steps align-center style="width: 100%">
              <el-step>
                <template #icon>
                  <div class="step-icon">
                    <i class="el-icon-check"></i>
                  </div>
                </template>
                <template #title>
                  <span class="step-title">申请商铺入驻</span>
                </template>
                <template #description>
                  <div class="step-desc">
                    <span>{{shopDetail.applyName}}已提交申请</span>
                    <span>{{shopDetail.updateTime}}</span>
                  </div>
                </template>
              </el-step>
              <el-step v-if="shopDetail.auditStatus !== '0'">
                <template #icon>
                  <div class="step-icon" :class="{ 'icon-refuse': shopDetail.auditStatus === '2' }">
                    <i class="el-icon-check"></i>
                  </div>
                </template>
                <template #title>
                  <span class="step-title" :class="{ 'title-refuse': shopDetail.auditStatus === '2' }">{{shopDetail.auditStatus === '2' ? '已驳回' : '已通过'}}</span>
                </template>
                <template #description>
                  <div class="step-desc">
                    <span>{{shopDetail.auditBy}}审批</span>
                    <span>{{shopDetail.auditTime}}</span>
                  </div>
                </template>
              </el-step>
              <el-step v-else>
                <template #icon>
                  <div class="step-icon-before">
                    <div></div>
                  </div>
                </template>
                <template #title>
                  <span class="step-title title-before">待审批</span>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">基本信息</div>
      </div>
      <div class="form">
        <div class="left">
          <div class="formItem">
            <div class="label">申请人<span>*</span></div>
            <el-input v-model="shopDetail.applyName" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">手机号码<span>*</span></div>
            <el-input v-model="shopDetail.applyPhone" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">商铺名称<span>*</span></div>
            <el-input v-model="shopDetail.name" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">商铺类型<span>*</span></div>
            <el-input v-model="shopType" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">所属景区<span>*</span></div>
            <el-input v-model="shopDetail.jingquName" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">具体位置<span>*</span></div>
            <el-input v-model="shopDetail.address" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">申请时间<span>*</span></div>
            <el-input v-model="shopDetail.updateTime" readonly></el-input>
          </div>
        </div>
        <div class="right">
          <div class="formItem">
            <div class="label">商铺状态<span>*</span></div>
            <el-input v-model="shopStatusText" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">营业时间<span>*</span></div>
            <el-input :value="shopDetail.businessTime || '-'" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">营业电话<span>*</span></div>
            <el-input :value="shopDetail.businessPhone || '-'" readonly></el-input>
          </div>
          <div class="formItem">
            <div class="label">门脸照片<span>*</span></div>
            <el-image
              style="width: 236px"
              :src="shopDetail.doorImg"
              fit="contain">
            </el-image>
          </div>
          <div class="formItem">
            <div class="label">营业执照<span>*</span></div>
            <el-image
              style="width: 236px"
              :src="shopDetail.businessLicenseImg"
              fit="contain">
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <div v-if="type === 'edit'" class="detail">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">编辑营业状态</div>
      </div>
      <div class="formItem">
        <div class="content">
          <div class="choose_item" @click="chooseShopStatus('0')">
            <img v-if="shopStatus === '0'" src="@/assets/images/selected_circle.png" alt="">
            <img v-else src="@/assets/images/un_selected_circle.png" alt="">
            <span>正常营业</span>
          </div>
          <div class="choose_item" @click="chooseShopStatus('1')">
            <img v-if="shopStatus === '1'" src="@/assets/images/selected_circle.png" alt="">
            <img v-else src="@/assets/images/un_selected_circle.png" alt="">
            <span>暂停营业</span>
          </div>
          <div class="choose_item" @click="chooseShopStatus('2')">
            <img v-if="shopStatus === '2'" src="@/assets/images/selected_circle.png" alt="">
            <img v-else src="@/assets/images/un_selected_circle.png" alt="">
            <span>店铺撤场</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="detail">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">审批</div>
      </div>
      <div class="formItem">
        <div class="content">
          <div class="choose_item" @click="chooseAuditStatus('1')">
            <img v-if="auditStatus === '1'" src="@/assets/images/selected_circle.png" alt="">
            <img v-else src="@/assets/images/un_selected_circle.png" alt="">
            <span>通过</span>
          </div>
          <div class="choose_item" @click="chooseAuditStatus('2')">
            <img v-if="auditStatus === '2'" src="@/assets/images/selected_circle.png" alt="">
            <img v-else src="@/assets/images/un_selected_circle.png" alt="">
            <span>驳回</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="reason" v-if="type !== 'edit' && auditStatus === '2'">
        <div class="formItem">
          <div class="label">驳回原因<span>*</span></div>
          <el-input v-model="reason" :readonly="type === 'detail'"></el-input>
        </div>
      </div>
      <div class="btn-group">
        <el-button v-if="type !== 'detail'" type="primary" class="confirm-btn" @click="confirm">确定</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {getQiyeDetail, qiyeAudit, qiyeEdit} from "@/api/form/enterprise";
import {getDicts} from "@/api/system/dict/data";

export default {
  async mounted () {
    this.type = this.$route.query.type
    await this.getQiyeDetail(this.$route.query.id)
    await this.getShopType()
  },
  data () {
    return {
      shopDetail: {},
      type: '',
      auditStatus: '',
      shopStatus: '',
      reason: '',
      shopTypeList: []
    }
  },
  computed: {
    shopType () {
      if (this.shopTypeList.length) {
        return this.shopTypeList.find(item => item.dictValue === this.shopDetail.type).dictLabel
      }
      return ''
    },
    shopStatusText () {
      if (this.shopDetail.status === '0') return '正常营业'
      if (this.shopDetail.status === '1') return '暂停营业'
      if (this.shopDetail.status === '2') return '店铺撤场'
    }
  },
  methods: {
    chooseAuditStatus(auditStatus) {
      if (this.type === 'detail') return
      this.auditStatus = auditStatus
    },
    chooseShopStatus(shopStatus) {
      this.shopStatus = shopStatus
    },
    confirm() {
      if (this.type === 'edit') {
        this.shopStatusChange()
      } else {
        this.shopAudit()
      }
    },
    async shopAudit () {
      if (this.auditStatus === '0') {
        this.$message({message: '请选择审批状态', type: 'warning'})
        return
      }
      if (this.auditStatus === '2' && !this.reason) {
        this.$message({message: '请填写驳回原因', type: 'warning'})
        return
      }
      const { code, msg } = await qiyeAudit({
        id: this.shopDetail.id,
        auditStatus: this.auditStatus
      })
      if (code === 200) {
        this.$message({message: '审批成功', type: 'success'})
        this.$router.back()
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    async shopStatusChange() {
      if (this.shopStatus === this.shopDetail.status) {
        this.$message({message: '请更改营业状态', type: 'warning'})
        return
      }
      const { code, msg } = await qiyeEdit({
        id: this.shopDetail.id,
        status: this.shopStatus
      })
      if (code === 200) {
        this.$message({message: '修改成功', type: 'success'})
        this.$router.back()
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    async getQiyeDetail (id) {
      const { code, data, msg } = await getQiyeDetail({
        id
      })
      if (code === 200) {
        this.shopDetail = data
        this.auditStatus = this.shopDetail.auditStatus
        this.shopStatus = this.shopDetail.status
        this.reason = this.shopDetail.auditReason
      } else {
        this.$message({message: msg})
      }
    },
    async getShopType () {
      const { code, data } = await getDicts('merchant_type')
      if (code === 200) {
        this.shopTypeList = data || []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  background: var(--theme_bg_color);
  .process-box {
    width: calc(100% - 16px);
    background: #fff;
    .box-name {
      padding: 20px 16px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 19px;
      border-bottom: 1px solid #F2F3F5;
    }
    .box-content {
      padding: 20px 16px;
      .process-name {
        border-bottom: none;
      }
      .process-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .step {
          width: 70%;
          display: flex;
          ::v-deep .el-step__icon.is-text {
            border: none !important;
          }
          ::v-deep .el-step__head {
            margin-bottom: 8px !important;
          }
          ::v-deep .el-step__title {
            line-height: 20px !important;
          }
          ::v-deep .el-step__line {
            border-style: dotted !important;
            background-color: transparent;
            border-bottom: none !important;
            border-width: 1px !important;
            border-color: #E8E8E8 !important;
          }
        }
        .step-icon {
          padding: 6px;
          border-radius: 50%;
          background: #E8F3FF;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            color: #2E69F8;
            font-size: 12px;
          }
        }
        .icon-refuse {
          background: #FFE8E8;
          i {
            color: #F82E2E;
            font-size: 12px;
          }
        }
        .step-icon-before {
          padding: 6px;
          border-radius: 50%;
          background: #F2F3F5;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #E8E8EA;
          }
        }
        .step-title {
          font-size: 16px;
          font-weight: 400;
          color: #2E69F8;
          line-height: 20px;
        }
        .title-refuse {
          color: #F82E2E;
        }
        .title-before {
          color: #333333;
        }
        .step-desc {
          margin-top: 6px;
          span:nth-child(1) {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
          }
          span:nth-child(2) {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
          }
        }
      }
    }

  }
  .detail {
    width: calc(100% - 16px);
    background: #fff;
    margin-top: 16px;
    padding: 16px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      .icon {
        width: 4px;
        height: 16px;
        background: #3370FF;
        margin-right: 10px;
      }
      .desc {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }
    }
    .form {
      width: 100%;
      display: flex;
      .left, .right {
        display: flex;
        flex-direction: column;
        width: 45%;
        margin-right: 100px;
      }
    }
  }
  .formItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-bottom: 16px;
      span {
        color: #F54A45;
      }
    }
    .content {
      display: flex;
      align-items: center;
      .choose_item {
        margin-right: 30px;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  .footer {
    margin-top: 10px;
    width: 60%;
    .btn-group {
      margin-top: 20px;
      display: flex;
      .confirm-btn {
        background: #2E69F8;
        color: #fff;
        margin-right: 50px;
      }
    }
    .reason {
      width: 50%;
      display: flex;
      align-items: flex-end;
      .formItem {
        margin-bottom: 0;
      }
    }
  }
}
</style>
